<!DOCTYPE html>
<html>

<head>
    <title>遥控器</title>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./style/vant@2.12.css">

    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui" />
</head>

<body>
    <div id="app">
        <van-tabs v-model="selectedTab">
            <van-tab title="美菱风扇" name="美菱风扇" >
                <van-cell-group>
                    <van-cell title="美菱风扇" inset>                               
                    </van-cell>
                    <van-grid :column-num="3">
                        <van-grid-item v-for="item in mMeiLingFan_Arr" :key="item.data">
                            <div v-if="item.icon != null">
                                <van-button type="info" @click="btnXxx_OnClick(item)">
                                    {{item.name}}
                                </van-button>
                            </div>
                        </van-grid-item>
                    </van-grid>
                </van-cell-group>
            </van-tab>
            <van-tab title="荣事达语音风扇" name="荣事达语音风扇" >
                <van-cell-group>
                    <van-cell title="荣事达语音风扇" inset>                               
                    </van-cell>
                    <van-grid :column-num="3">
                        <van-grid-item v-for="item in mRsdFan_Arr" :key="item.data">
                            <div v-if="item.icon != null">
                                <van-button type="info" @click="btnXxx_OnClick(item)">
                                    {{item.name}}
                                </van-button>
                            </div>
                        </van-grid-item>
                    </van-grid>
                </van-cell-group>
            </van-tab>
            <van-tab title="松下电视遥控" name="松下电视遥控" >
                <van-cell-group>
                    <van-cell title="控制器区域1" inset>                               
                    </van-cell>
                    <van-grid :column-num="3">
                        <van-grid-item v-for="item in arr1" :key="item.data">
                            <van-button type="info" :icon="item.icon" @click="btnXxx_OnClick(item)">
                                {{item.name}}
                            </van-button>
                        </van-grid-item>
                    </van-grid>
                </van-cell-group>
        
                <van-cell-group>
                    <van-cell title="控制器区域2" inset>                               
                    </van-cell>
                    <van-grid :border="false" :column-num="3">
                        <van-grid-item v-for="item in arr2" :key="item.data">                    
                            <div v-if="item.icon!=null">
                                <van-button type="info" :icon="item.icon" :style="item.style" @click="btnXxx_OnClick(item)">
                                </van-button>
                            </div>                    
                        </van-grid-item>
                    </van-grid>
                </van-cell-group>

                <van-cell-group>
                    <van-cell title="控制器区域3" inset>                               
                    </van-cell>
                    <van-grid :border="false" :column-num="3">
                        <van-grid-item v-for="item in arr3" :key="item.name">                    
                            <div v-if="item.icon!=null">
                                <van-button type="info" round @click="btnXxx_OnClick(item)">
                                    {{item.name}}
                                </van-button>
                            </div>                    
                        </van-grid-item>
                    </van-grid>
                </van-cell-group>
            </van-tab>
            <van-tab title="床头灯遥控" name="床头灯遥控" >
                <van-cell-group>
                    <van-cell title="床头灯遥控" inset>                               
                    </van-cell>
                    <van-grid :column-num="3">
                        <!-- <van-grid-item v-for="value in 6" :key="value" icon="photo-o" text="文字" /> -->
                        <van-grid-item v-for="item in lightarr" :key="item.data">
                            <van-button type="info" @click="btnXxx_OnClick(item)">
                                {{item.name}}
                            </van-button>
                        </van-grid-item>
                    </van-grid>
                </van-cell-group>
            </van-tab>
            <van-tab title="HK1Box" name="HK1Box" >
                <van-cell-group>
                    <van-cell title="控制器区域1" inset>
                    </van-cell>
                    <van-grid :column-num="3">
                        <van-grid-item v-for="item in hk1box_Arr0" :key="item.data">
                            <van-button type="info" :icon="item.icon" @click="btnXxx_OnClick(item)">
                                {{item.name}}
                            </van-button>
                        </van-grid-item>
                    </van-grid>
                </van-cell-group>
        
                <van-cell-group>
                    <van-cell title="控制器区域2" inset>
                    </van-cell>
                    <van-grid :border="false" :column-num="3">
                        <van-grid-item v-for="item in hk1box_Arr1" :key="item.data">                    
                            <div v-if="item.icon!=null">
                                <van-button type="info" :icon="item.icon" :style="item.style" @click="btnXxx_OnClick(item)">
                                </van-button>
                            </div>                    
                        </van-grid-item>
                    </van-grid>
                </van-cell-group>
            </van-tab>
            <van-tab title="标签 4" name="标签 4" >内容 4</van-tab>
        </van-tabs>
    </div>

    <!-- 先引入 Vue -->
    <script src="./script/vue@2.7.14.js"></script>
    <!-- 引入组件库 -->
    <script src="./script/vant@2.12.54.js"></script>

    <script src="./script/axios@1.4.0.js"></script>
    <script src="./script/linq@3.2.0.js"></script>
    <script src="./script/jsonp@0.0.1.js"></script>

    <script src="./data/LightArr.js"></script>
    <script src="./data/PanasonicTVArr.js"></script>
    <script src="./data/HK1Box.js"></script>
    <script src="./data/MeiLingFan.js"></script>
    <script src="./data/RsdFan.js"></script>

    <script>
        Vue.prototype.$axios = axios;

        // 超时时间是 20 秒
        axios.defaults.timeout = 20000;
        // 允许跨域
        axios.defaults.crossDomain = true;
        axios.defaults.headers.common["Access-Control-Allow-Origin"] = "*";

        Vue.prototype.$linq = Enumerable;

        new Vue({
            el: '#app',

            data: function () {
                return {
                    selectedTab: '电视遥控',
                    arr1: getData_PanasonicTVArr1(),
                    arr2: getData_PanasonicTVArr2(),
                    arr3: getData_PanasonicTVArr3(),
                    lightarr: getData_LightArr(),
                    hk1box_Arr0: getData_HK1Box_Arr0(),
                    hk1box_Arr1: getData_HK1Box_Arr1(),
                    mMeiLingFan_Arr: getData_MeiLingFan_Arr(),
                    mRsdFan_Arr: getData_RsdFan_Arr(),
                };
            },

            methods: {
                handleClick: function () {
                    this.$toast('Hello world!');

                    this.$dialog.alert({
                        message: '弹窗内容',
                    });
                },
                btnXxx_OnClick: function(args) {
                    try{
                        console.log('item: ', JSON.stringify(args));
                        // 转化为 int
                        const intF = parseInt("38000");
                        let strArr = args.data.split(',');
                        // 转换为 int[]
                        let intArr = [];                        
                        for(let index = 0; index < strArr.length; index++) {
                            intArr.push(parseInt(strArr[index].trim()));
                        }
                        
                        let r = $device.IR_Send(intF, intArr);
                        if(r) 
                        {
                            $device.Vibrate(100);
                        }
                        else{
                            this.$toast(`返回信息:${r}`);
                        }
                    }
                    catch(ex)
                    {
                        this.$dialog.alert({message: ex});
                    }                    
                },
                ShowError: function(args) {
                    this.$dialog.alert({
                        message: args,
                    });
                }
            }            
        });

        // // 调用函数组件，弹出一个 Toast
        // vant.Toast('Hello Vant 2');

        // 通过 CDN 引入时不会自动注册 Lazyload 组件
        // 可以通过下面的方式手动注册
        Vue.use(vant.Lazyload);
    </script>
</body>

</html>